<template>
  <el-container>
    <el-header style="background-color: white;color: #000000;">
        <h1 align="center">试卷生成</h1>
      </el-header>
    <el-main>
      <!--  行内表单-->
      <el-form :model="paperData" :inline="true" class="demo-form-inline" label-width="100px">
           <el-form-item label="考试名称">
                 <el-input v-model="paperData.paperName"></el-input>
           </el-form-item>
           <el-form-item label="考试总分">
               <el-input-number v-model="paperData.paperScore" :min="100" :max="200"></el-input-number>
           </el-form-item>
           <el-form-item label="考试时长">
               <el-input-number v-model="paperData.paperTime" :min="60" :max="300"></el-input-number>
           </el-form-item>

      </el-form>
        <!-- 表格组件-->
      <el-table :data="list" :row-key="rowKey" style="width: 100%;" @selection-change="seleced">
            <!-- 列标签-->
          <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
          <el-table-column prop="quId" label="编号" width="100"></el-table-column>
          <el-table-column prop="quContent" label="题目" width="400"></el-table-column>
          <el-table-column prop="quType" label="题型" width="100"></el-table-column>
          <el-table-column prop="quScore" label="分数" width="100"></el-table-column>
          <el-table-column prop="quAnswer" label="答案" width="100"></el-table-column>
          <el-table-column prop="createTime" label="修改时间" width="200"></el-table-column>
          <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="update(scope.row)">编辑</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div class="block">
        <!-- 1 size-change 下拉框选中事件触发的函数 -->
        <!-- 2 current-change 页码和上一页，下一页触发的事件-->
        <!-- 3 current-page 当前页的页码-->
         <!-- 4 page-sizes  下拉框选中行数的集合 -->
         <!--5 page-size 每页显示条数->
         <!-- 6 layout 分页页面布局 -->
         <!--7 total 总条数 -->
          <el-pagination
              @size-change="sc"
              @current-change="cc"
              :current-page="queryParam.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="queryParam.row"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
      </div>
        <div align="center">
              <el-button type='success' size="mini" @click="create">试卷生成</el-button>
        </div>

        <!-- 试卷预览-->
        <el-dialog title="预览试卷" :visible.sync="isShow" width="50%">
             <div align="center">
                  <p>
                    试卷名称:{{paper.paperName}}&nbsp;&nbsp;
                    试卷总分:{{paper.paperScore}}&nbsp;&nbsp;
                    试卷时长:{{paper.paperTime}}
                   </p>
                   <br>
             </div>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                    <span>一:单选题</span>
               </div>
               <div class="text item" v-for="(x,index) in signList">
                   <p>{{index+1}}:{{x.quContent}}</p>
                   <p>A:<input type="radio" :name="'s'+index"><span>{{x.quAoption}}</span></p>
                   <p>B:<input type="radio" :name="'s'+index"><span>{{x.quBoption}}</span></p>
                   <p>C:<input type="radio" :name="'s'+index"><span>{{x.quCoption}}</span></p>
                   <p>D:<input type="radio" :name="'s'+index"><span>{{x.quDoption}}</span></p>
                    <br>
               </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                    <span>二:多选题</span>
               </div>
               <div class="text item" v-for="(x,index) in moreList">
                   <p>{{index+1}}:{{x.quContent}}</p>
                   <p>A:<input type="checkbox" :name="'m'+index"><span>{{x.quAoption}}</span></p>
                   <p>B:<input type="checkbox" :name="'m'+index"><span>{{x.quBoption}}</span></p>
                   <p>C:<input type="checkbox" :name="'m'+index"><span>{{x.quCoption}}</span></p>
                   <p>D:<input type="checkbox" :name="'m'+index"><span>{{x.quDoption}}</span></p>
                    <br>
               </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                    <span>三:判断题</span>
               </div>
               <div class="text item" v-for="(x,index) in judgeList">
                   <p>{{index+1}}:{{x.quContent}}</p>
                   <p>√:<input type="radio" :name="'j'+index"><span>{{x.quAoption}}</span></p>
                   <p>×:<input type="radio" :name="'j'+index"><span>{{x.quBoption}}</span></p>

                    <br>
               </div>
            </el-card>

        </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
 export default {
        name:"question",
        data(){
           return{
                isShow:true,
                list:[],//当前页集合
                total:0,//总条数
                totalPage:"",//总页数
                queryParam:{//分页参数
                      page:1,
                      row:5,
                },
                paperData:{
                    paperName:"java考试02",
                    paperScore:"",
                    paperTime:"",
                    quIds:""
                },
                qs:[],//获取选中的题库的值
                paper:{},//预览试卷信息
                signList:[],//单选题集合
                moreList:[],//多选题集合
                judgeList:[]//判断题集合

           }
        },
        methods:{
            queryByPage(){  //查询分页
                var self = this;
                this.$http.get("/paper-question/queryQuetionByPage",
                            { params:
                                   this.queryParam,
                            }).then(function(rs){
                                if(rs.data.success){
                                   //赋值当前页
                                   self.list = rs.data.data.list;
                                   //赋值总条数
                                   self.total = rs.data.data.total;
                                   //赋值总页数
                                   self.totalPage = rs.data.data.totalPage;
                                }

                            }).catch(function(rs){
                                  console.log(rs);
                                  self.$message("服务器连接错误");
                            })

            },
            sc(row){//下拉框触发
               this.queryParam.row = row;
               //刷新
               this.queryByPage();
            },
            cc(page){//页码触发的事件
              this.queryParam.page = page;
               //刷新
               this.queryByPage();
            },
            update(row){//修改
                console.log(row);
            },
            seleced(v){//表格的复选框选中触发的函数
              console.log(v);
              this.qs = v;
            },
            create(){//试卷生成

              //清空quIds
              this.paperData.quIds="";

              for(var i=0;i<this.qs.length;i++){
                this.paperData.quIds+=this.qs[i].quId+",";
              }
              console.log(this.paperData);

              var self = this;
              this.$http.get("/paper/create",
                          { params:
                                 this.paperData,
                          }).then(function(rs){
                               self.$alert(rs.data.info);
                              if(rs.data.success){
                                //成功逻辑
                              }

                          }).catch(function(rs){
                                console.log(rs);
                                self.$message("服务器连接错误");
                          })

            },
            rowKey(v){
              //返回的编号
              return v.quId;
            },
            showPaper(){ //预览试卷
              var self = this;
              this.$http.get("/paper/showPaper",
                          { params:
                                 this.paperData,
                          }).then(function(rs){
                              self.paper= rs.data.data;

                              for(var i=0;i<self.paper.list.length;i++){
                                  //添加单选题集合
                                  if(self.paper.list[i].quType=="单选题"){
                                      self.signList.push(self.paper.list[i]);
                                  }else if(self.paper.list[i].quType=="多选题"){
                                      self.moreList.push(self.paper.list[i]);
                                  }else{
                                    self.judgeList.push(self.paper.list[i]);
                                  }
                              }

                          }).catch(function(rs){
                                console.log(rs);
                                self.$message("服务器连接错误");
                          })
            }
        },
        mounted(){
           this.queryByPage();
           //方便测试
           this.showPaper();
        }
 }
</script>

<style>
</style>
